<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script>

    // 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题

    let {createApp} = Vue;
    let {ref,reactive} = Vue;
    let {unref,toRaw,markRaw} = Vue;


    let app = createApp({
        setup(props) {
            let count = ref(10);
            let zhang = reactive({name:"张三",age:18,info:{height:177,weight:70}});

            // 获取ref对象的原始值
            console.log(count.value);

            // unref(count)  => 判断是否是ref对象 ? ref对象.value : 返回传入的值
            // console.log(unref(count));
            // console.log(unref(true));
            // console.log(unref(zhang));


            // 获取reactive对象的原始值
            // toRaw 根据一个 Vue 创建的代理返回其原始对象。

            // console.log(toRaw(zhang));

            

            // markRaw()​
            // 将一个对象标记为不可被转为代理。返回该对象本身。

            var obj= {a:1,b:2,__v_skip: true};
            // markRaw(obj);  // 将一个对象标记为不可被转为代理 (给对象添加__v_skip: true)

            let o = reactive(obj);  // reactive()将对象转为代理对象时,会判断是否存在__v_skip: true , 存在就返回原对象
            console.log(o);


         
            return {
               
            }
        },
        mounted() {
            console.log("代理对象,this",this);

        },
    })


    app.mount("#app");


</script>

</html>